<template>
	<view>
		<view v-if="userMsg.name">

			<!-- 存在用户信息 -->
			<my-address></my-address>

			<!-- 购物车商品列表的标题区域 -->
			<view class="cart-title">
				<!-- 左侧的图标 -->
				<uni-icons type="shop" size="18"></uni-icons>
				<!-- 描述文本 -->
				<text class="cart-title-text">购物车</text>
			</view>

			<!-- 商品列表区域 -->
			<!-- uni-swipe-action 是最外层包裹性质的容器 -->
			<uni-swipe-action>
				<block v-for="(goods,i) in cart" :key="i">
					<!-- 在radioChangeHandler时间处理函数中，通过时间对象e，得到商品goods_id和goods_state -->
					<!-- uni-swipe-action-item可以为其子节点提供滑动操作的效果，需要通过iptions属性来指定操作按钮的配置信息 -->
					<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods)">
						<my-goods show-num :goods="goods" show-radio @radio-change="radioChangeHandler"
							@num-change="numberChangeHandler"></my-goods>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>

			<!-- 点击购买 -->
			<button class="check-out-btn" type="primary" @click="checkOut">购买结账<text
					v-if="count">{{count}}元</text></button>
		</view>
		<!-- 不存在用户信息 -->
		<view class="nonUserInfo" v-else>
			<button type="primary" @click="gotoLogin">请先登录</button>
		</view>
	</view>
</template>

<script>
	// import { mapGetters } from 'vuex'
	import {
		mapState,
		mapMutations
	} from "vuex"
	import badgeMix from "../../mixins/tabbar-badge.js"
	export default {
		mixins: [badgeMix],
		data() {
			return {
				userMsg: {},
				options: [{
					text: '删除', //显示的文本
					style: {
						backgroundColor: '#C00000' //按钮的背景颜色
					}
				}]
			};
		},

		computed: {
			// ...mapGetters('m_cart',['total']),
			...mapState('m_cart', ['cart']),
			count() {
				let cart = this.cart.concat([])
				cart = cart.filter(res => {
					return res.goods_state == true
				})
				const allTotal = cart.reduce((total, item) => {
					return total + item.goods_count * item.goodsPrice
				}, 0)
				return allTotal || 0
			}
		},

		methods: {
			//结账
			async checkOut() {
				const cart = this.cart.concat([])
				const goodsAuser = cart.filter(res => {
					res = Object.assign(res, this.userMsg)
					res.allCount = res.goodsPrice * res.goods_count
					return res.goods_state == true
				})
				// console.log(goodsAuser);

				// 发送网络请求，生成订单
				uni.request({
					url: 'http://127.0.0.1:3000/order/add',
					method: 'POST',
					timeout: 5000,
					data: {
						goodsAuser
					},
					success: (res) => {
						res = res.data
						if (res.status == 200) {
							uni.showToast({
								title: '订单生成成功，商品正在积极赶往~',
								icon: 'success',
							})
							goodsAuser.forEach(item=>{
								this.removeGoodsById(item.goodsId)
							})
						} else {
							console.log(res);
							uni.showToast({
								title: res.msg,
								icon: 'error',
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取数据失败',
							icon: 'error',
						})
					}
				})
			},
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			setBadge() {
				// 调用uni.setTabBarBadge()方法，为购物车设置右上角的徽标
				uni.setTabBarBadge({
					index: 2, //索引
					text: this.total + '' //注意：text的值必须是字符串，不能是数字
				})
			},

			// 商品的勾选状态发生了变化
			radioChangeHandler(goodObj) {
				this.updateGoodsState(goodObj)
			},

			// 商品的数量发生了改变
			numberChangeHandler(goodObj) {
				this.updateGoodsCount(goodObj)
			},

			// 点击滑动操作按钮
			swipeActionClickHandler(goods) {
				this.removeGoodsById(goods.goodsId)
			},

			// 判断是否登录
			getUserInfo() {
				try {
					const value = uni.getStorageSync('userInfo');
					console.log(value);
					if (value) {
						this.userMsg = value
						console.log('123123', value);
					}
				} catch (e) {
					// error
					console.log(e);
				}
			},
			gotoLogin() {
				uni.switchTab({
					url: '/pages/my/my'
				});

			}
		},

		onShow() {
			// 在页面刚展示的时候，设置数字徽标
			this.setBadge()
			this.getUserInfo()
			// console.log('cart');
			console.log(JSON.stringify(this.userMsg));
		},
	}
</script>

<style lang="scss">
	.check-out-btn {
		margin-top: 20px;
	}

	.cart-title {
		height: 40px;
		display: flex;
		align-items: center;
		font-size: 14px;
		padding-left: 5px;
		border-bottom: 1px solid #efefef;

		.cart-title-text {
			margin-left: 10px;
		}
	}


	.nonUserInfo {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
